<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">超级会员支付</h1>
				</section>
			</div>
		</header>

		<!-- 订单信息部分 -->
		<div class="order-info-card">
			<div class="card-header">
				<i class="material-icons">stars</i>
				<h3>超级会员套餐</h3>
			</div>
			<div class="order-detail">
				<div class="detail-item">
					<span class="detail-label">套餐时长</span>
					<span class="detail-value">{{ duration === 1 ? '1个月' : '1年' }}</span>
				</div>
				<div class="detail-item">
					<span class="detail-label">套餐价格</span>
					<span class="detail-value price">¥{{ price }}</span>
				</div>
			</div>
			<div class="order-total">
				<span>总计</span>
				<span class="total-price">¥{{ price }}</span>
			</div>
		</div>

		<!-- 支付方式部分 -->
		<div class="payment-methods-card">
			<div class="card-header">
				<i class="material-icons">payment</i>
				<h3>选择支付方式</h3>
			</div>
			<div class="payment-methods">
				<div 
					class="payment-method" 
					:class="{ 'active': paymentType === 'alipay' }"
					@click="selectPaymentType('alipay')"
				>
					<div class="method-left">
						<img src="../assets/alipay.png" class="payment-logo">
						<span>支付宝</span>
					</div>
					<i class="material-icons check-icon" v-show="paymentType === 'alipay'">check_circle</i>
				</div>
				<div 
					class="payment-method" 
					:class="{ 'active': paymentType === 'wechat' }"
					@click="selectPaymentType('wechat')"
				>
					<div class="method-left">
						<img src="../assets/wechat.png" class="payment-logo">
						<span>微信支付</span>
					</div>
					<i class="material-icons check-icon" v-show="paymentType === 'wechat'">check_circle</i>
				</div>
				<div 
					class="payment-method" 
					:class="{ 'active': paymentType === 'wallet' }"
					@click="selectPaymentType('wallet')"
				>
					<div class="method-left">
						<i class="material-icons wallet-icon">account_balance_wallet</i>
						<span>钱包支付</span>
					</div>
					<i class="material-icons check-icon" v-show="paymentType === 'wallet'">check_circle</i>
				</div>
			</div>
		</div>

		<!-- 钱包支付密码输入 -->
		<div class="wallet-password-card" v-show="paymentType === 'wallet'">
			<div class="card-header">
				<i class="material-icons">lock</i>
				<h5>钱包支付</h5>
			</div>
			<div class="password-input-wrapper">
				<label>支付密码：</label>
				<input 
					type="password" 
					v-model="payPwd" 
					placeholder="请输入6位支付密码"
					maxlength="6"
					class="password-input"
				/>
			</div>
			<div class="wallet-balance" v-if="walletBalance !== null">
				<i class="material-icons">account_balance</i>
				<span>钱包余额：<strong>¥{{ walletBalance }}</strong></span>
			</div>
		</div>

		<div class="payment-button-wrapper">
			<button class="payment-button" @click="confirmPayment">
				<i class="material-icons">check_circle</i>
				<span>确认支付</span>
			</button>
		</div>

		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue';
	import BackButton from '../components/BackButton.vue';
	export default {
		name: 'SuperMemberPayment',
		data(){
			return {
				duration: 1,
				price: 9.9,
				paymentType: 'alipay',
				payPwd: '',
				walletBalance: null,
				user: null
			}
		},
		created() {
			let user = this.$getSessionStorage('user');
			if (!user) {
				this.$toast?.error('请先登录');
				this.$router.push('/login');
				return;
			}
			this.user = user;
			
			// 从路由参数获取套餐信息
			const duration = parseInt(this.$route.query.duration);
			const price = parseFloat(this.$route.query.price);
			if (duration && price) {
				this.duration = duration;
				this.price = price;
			}
			
			this.loadWalletBalance();
		},
		mounted() {
			history.pushState(null, null, document.URL);
			window.onpopstate = () => {
				this.$router.push({path: '/superMember'});
			}
		},
		unmounted() {
			window.onpopstate = null;
		},
		methods:{
			selectPaymentType(type) {
				this.paymentType = type;
				if (type === 'wallet') {
					this.loadWalletBalance();
				}
			},
			loadWalletBalance() {
				if (!this.user) return;
				this.$axios.post('wallet/info', this.$qs.stringify({
					walletId: this.user.userId
				})).then(response => {
					if (response.data && (response.data.code === 200 || response.data.code === '200')) {
						const walletInfo = response.data.result || {};
						if (walletInfo.availableBalance) {
							this.walletBalance = walletInfo.availableBalance;
						} else if (walletInfo.balance) {
							const balance = parseFloat(walletInfo.balance || 0);
							const frozen = parseFloat(walletInfo.frozenAmount || 0);
							this.walletBalance = (balance - frozen).toFixed(2);
						} else {
							this.walletBalance = '0.00';
						}
					} else {
						this.walletBalance = '0.00';
					}
				}).catch(error => {
					console.error('获取钱包余额失败:', error);
					this.walletBalance = '0.00';
				});
			},
			confirmPayment() {
				if (this.paymentType === 'wallet') {
					if (!this.payPwd || this.payPwd.length < 6) {
						alert('请输入6位支付密码');
						return;
					}
					
					if (this.walletBalance !== null && parseFloat(this.walletBalance) < this.price) {
						alert('钱包余额不足，请先充值');
						return;
					}

					// 先调用钱包支付接口（使用系统账户作为收款方）
					this.$axios.post('wallet/pay', this.$qs.stringify({
						fromWalletId: this.user.userId,
						toWalletId: 'system', // 系统账户
						payPwd: this.payPwd,
						amount: this.price
					})).then(payResp => {
						if (payResp.data && (payResp.data.code === 200 || payResp.data.code === '200')) {
							// 支付成功后购买超级会员
							this.$axios.post('SuperMemberController/purchase', this.$qs.stringify({
								userId: this.user.userId,
								duration: this.duration
							})).then(response => {
								if (response.data && (response.data.code === 200 || response.data.code === '200')) {
									if (window.dispatchEvent) {
										window.dispatchEvent(new CustomEvent('wallet-balance-updated'));
									}
									alert('支付成功！');
									this.$router.push({ path: '/superMember'});
								} else {
									alert('购买失败：' + (response.data.message || '请重试'));
								}
							}).catch(error => {
								console.error(error);
								alert('购买过程中出现错误，请稍后重试。');
							});
						} else {
							alert('支付失败：' + (payResp.data.message || '请重试'));
						}
					}).catch(error => {
						console.error(error);
						alert('支付过程中出现错误，请稍后重试。');
					});
				} else {
					// 支付宝或微信支付（模拟支付成功）
					const paymentName = this.paymentType === 'alipay' ? '支付宝' : '微信';
					
					// 模拟支付成功后购买超级会员
					this.$axios.post('SuperMemberController/purchase', this.$qs.stringify({
						userId: this.user.userId,
						duration: this.duration
					})).then(response => {
						if (response.data && (response.data.code === 200 || response.data.code === '200')) {
							if (window.dispatchEvent) {
								window.dispatchEvent(new CustomEvent('wallet-balance-updated'));
							}
							alert(paymentName + '支付成功！');
							this.$router.push({ path: '/superMember'});
						} else {
							alert('购买失败，请重试！');
						}
					}).catch(error => {
						console.error(error);
						alert('购买过程中出现错误，请稍后重试。');
					});
				}
			}
		},
		components: {
			AppFooter,
			BackButton
		}
	}
</script>

<style scoped>
	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 14vw;
	}

	.mdc-top-app-bar {
		background-color: #FF6B9D;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.order-info-card {
		margin-top: 0;
		background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%);
		color: #fff;
		border-radius: 0 0 20px 20px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		padding: 4vw;
		margin-bottom: 3vw;
	}

	.card-header {
		display: flex;
		align-items: center;
		gap: 2vw;
		margin-bottom: 3vw;
	}

	.card-header i {
		font-size: 5vw;
		opacity: 0.9;
	}

	.card-header h3 {
		font-size: 4.5vw;
		font-weight: 600;
		margin: 0;
		color: #fff;
	}

	.order-detail {
		background: rgba(255, 255, 255, 0.15);
		border-radius: 12px;
		padding: 3vw;
		margin-bottom: 3vw;
		backdrop-filter: blur(10px);
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
	}

	.detail-item:last-child {
		margin-bottom: 0;
	}

	.detail-label {
		font-size: 3.8vw;
		opacity: 0.9;
	}

	.detail-value {
		font-size: 4.2vw;
		font-weight: 600;
	}

	.detail-value.price {
		font-size: 5vw;
		font-weight: 700;
	}

	.order-total {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3vw 2.5vw;
		background: rgba(255,255,255,0.15);
		border-radius: 12px;
		backdrop-filter: blur(10px);
	}

	.total-price {
		font-size: 5.5vw;
		font-weight: 700;
	}

	.payment-methods-card {
		background-color: #fff;
		border-radius: 16px;
		box-shadow: 0 2px 12px rgba(0,0,0,0.08);
		margin: 0 3vw 3vw;
		overflow: hidden;
	}

	.payment-methods-card .card-header {
		padding: 3.5vw 4vw;
		border-bottom: 1px solid #f0f0f0;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		margin-bottom: 0;
	}

	.payment-methods-card .card-header i {
		color: #FF6B9D;
	}

	.payment-methods-card .card-header h3 {
		color: #333;
	}

	.payment-methods {
		padding: 2vw 0;
	}

	.payment-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 4vw;
		cursor: pointer;
		transition: all 0.3s ease;
		border-bottom: 1px solid #f5f5f5;
	}

	.payment-method:last-child {
		border-bottom: none;
	}

	.payment-method.active {
		background: linear-gradient(135deg, #fff0f5 0%, #ffe8f0 100%);
	}

	.method-left {
		display: flex;
		align-items: center;
		gap: 3vw;
	}

	.payment-logo {
		width: 8vw;
		height: 8vw;
		object-fit: contain;
		border-radius: 6px;
	}

	.wallet-icon {
		font-size: 6vw;
		color: #FF6B9D;
	}

	.method-left span {
		font-size: 4.2vw;
		font-weight: 500;
		color: #333;
	}

	.check-icon {
		font-size: 5.5vw;
		color: #38CA73;
	}

	.wallet-password-card {
		background-color: #fff;
		border-radius: 16px;
		box-shadow: 0 2px 12px rgba(0,0,0,0.08);
		margin: 0 3vw 3vw;
		padding: 4vw;
	}

	.wallet-password-card .card-header {
		margin-bottom: 3vw;
		padding: 0;
		background: none;
	}

	.wallet-password-card .card-header i {
		color: #FF6B9D;
	}

	.wallet-password-card .card-header h5 {
		color: #333;
	}

	.password-input-wrapper {
		display: flex;
		align-items: center;
		gap: 2vw;
		margin-bottom: 3vw;
		padding: 2.5vw;
		background-color: #f8f9fa;
		border-radius: 12px;
	}

	.password-input-wrapper label {
		font-size: 4vw;
		color: #666;
		white-space: nowrap;
		font-weight: 500;
	}

	.password-input {
		flex: 1;
		padding: 2.5vw;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		font-size: 4vw;
		outline: none;
		transition: all 0.3s ease;
		background-color: #fff;
	}

	.password-input:focus {
		border-color: #FF6B9D;
		box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
	}

	.wallet-balance {
		display: flex;
		align-items: center;
		gap: 2vw;
		padding: 2.5vw;
		background: linear-gradient(135deg, #fff0f5 0%, #ffe8f0 100%);
		border-radius: 12px;
		margin-top: 2vw;
	}

	.wallet-balance i {
		font-size: 4.5vw;
		color: #FF6B9D;
	}

	.wallet-balance span {
		font-size: 3.8vw;
		color: #666;
	}

	.wallet-balance strong {
		font-size: 4.5vw;
		color: #FF6B9D;
		font-weight: 700;
	}

	.payment-button-wrapper {
		padding: 4vw;
		position: fixed;
		bottom: 14vw;
		left: 0;
		right: 0;
		background-color: #fff;
		box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
		z-index: 100;
	}

	.payment-button {
		width: 100%;
		height: 11vw;
		border: none;
		border-radius: 12px;
		background: linear-gradient(135deg, #FF6B9D 0%, #C44569 100%);
		color: #fff;
		font-size: 4.5vw;
		font-weight: 600;
		outline: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2vw;
		box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
		transition: all 0.3s ease;
	}

	.payment-button:active {
		transform: scale(0.98);
		box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
	}

	.payment-button i {
		font-size: 5vw;
	}
</style>

